<template>
  <div class="cart-body">
    <div class="cart-main">
      <van-swipe-cell v-for="shop in cart" :key="`shoo-${shop.id}`">
        <sycartitems
          :id="shop.id"
          :title="shop.title"
          :photo="shop.photo"
          :price="shop.price"
          :saleNum="shop.saleNum"
          :check="shop.check"
          :count="shop.count"
        ></sycartitems>
        <!-- <div class="box">
          <div class="shop-info">
            <div class="shop-checkbox">
              <label>
                <input type="checkbox">
                <span></span>
              </label>
            </div>
            <div class="shop-img">
              <img src="https://img.alicdn.com/bao/uploaded/i3/3543858566/O1CN01lUuR5Q2D9HJ7D3afy_!!0-item_pic.jpg" alt="">
            </div>
            <div class="shop-text">
              <h2>阿双方均安看来房价阿里发来看看说翻就翻</h2>
              <p><mark>1000元</mark>劵</p>
              <p class="p1"><span>价格￥ 789</span><van-stepper/></p>
            </div>
        </div>
        </div> -->
        <template #right>
          <van-button square text="删除" type="danger" class="delete-button" @click="delshop({ id: shop.id})"/>
        </template>
      </van-swipe-cell>
    </div>
    <div class="cart-foot">
      <van-submit-bar :price="totalMoney * 100" button-text="提交订单" >
        <van-checkbox :value="isAllcheck" checked-color="#07c160">全选</van-checkbox>
        <template #tip>
          你的收货地址不支持同城送, <span >修改地址</span>
        </template>
      </van-submit-bar>
    </div>
  </div>
</template>

<script>
import sycartitems from '@/components/sycartitems'
import {
  mapState,
  mapGetters,
  mapMutations
} from 'vuex'
export default {
  name: 'Cart',
  computed: {
    ...mapState(['cart']),
    ...mapGetters(['totalMoney', 'isAllcheck'])
  },
  components: {
    sycartitems
  },
  methods: {
    ...mapMutations(['delshop'])
  }
}
</script>

<style lang="scss" scoped>
.cart-body{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .cart-main{
    flex: 1;
    .van-swipe-cell{
      margin-bottom: 10px;
    }
  }
  .cart-foot .van-submit-bar{
    position: static;
  }
}
.delete-button {
    height: 100%;
  }
</style>
